import classNames from 'classnames'
import React, { Component } from 'react'
import dayjs from 'dayjs'

export default class List extends Component {
  handleDel = (id) => {
    // !#2 子组件调用父组件传递过来的方法的同时并传递数据到父组件
    this.props.delItem(id)
  }
  render() {
    const { list, active } = this.props
    // 深拷贝拷贝日期对象会有问题，最终转出来的是字符串
    // const tempList = JSON.parse(JSON.stringify(list))
    const tempList = [...list]
    // !浅拷贝：可能会不小心违背“数据的不可变性”原则，或者不小心做了修改 props 的操作
    // !但是此案例浅拷贝没关系，因为我们不会修改 tempList，而是让父亲去修改 list
    // tempList[0].img = 'xxx'
    // 根据 active 的值，对 list 进行排序
    if (active === 'time') {
      // 按时间排序
      tempList.sort((item1, item2) => item2.time - item1.time)
    } else if (active === 'hot') {
      // 按热度排序
      tempList.sort((item1, item2) => item2.id - item1.id)
    }

    return (
      <div className='comment-list'>
        {/* 最后这里用的是排序好的 tempList 而不再是 list 啦 */}
        {tempList.map((item) => (
          <div key={item.id} className='list-item'>
            <div className='user-face'>
              <img className='user-head' src={item.img} alt='' />
            </div>
            <div className='comment'>
              <div className='user'>{item.author}</div>
              <p className='text'>{item.comment}</p>
              <div className='info'>
                <span className='time'>
                  {dayjs(item.time).format('YYYY-MM-DD HH:mm:ss')}
                </span>
                <span
                  className={classNames([
                    'like',
                    {
                      liked: item.attitude === 1,
                    },
                  ])}
                >
                  <i className='icon'></i>
                </span>
                <span
                  className={classNames('hate', {
                    hated: item.attitude === -1,
                  })}
                >
                  <i className='icon'></i>
                </span>
                <span
                  className='reply btn-hover'
                  onClick={this.handleDel.bind(this, item.id)}
                >
                  删除
                </span>
              </div>
            </div>
          </div>
        ))}
      </div>
    )
  }
}
